<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<!-- <link rel="stylesheet" href="css/iconfont.css" /> -->
		<script src="js/storage.js"></script>
		<script src="js/util.js"></script>
		<script src="js/url.js"></script>
		<script type="text/javascript" charset="UTF-8">
			mui.init();
			mui.plusReady(function() {
				//设置搜索按钮的点击事件，可以进行二次搜索
				document.getElementById("searchBtn").addEventListener("tap", function() {
					//开始进行搜索
					search();
				});

				document.getElementById("sortBtn1").addEventListener("tap", function() {
					//重新搜索
					search(1);
				});

				document.getElementById("sortBtn2").addEventListener("tap", function() {
					//重新搜索
					search(2);
				});

				document.getElementById("sortBtn3").addEventListener("tap", function() {
					//重新搜索
					search(3);
				});

				//批量设置列表的点击事件
				mui('#hotelList').on("tap", ".mui-table-view-cell", function() {
					//获得当前的酒店id
					var hid = this.getAttribute("hid");

					//获得当前的入店时间到离店时间
					var beginTime = document.getElementById("beginTimeBtn").value;
					var endTime = document.getElementById("endTimeBtn").value;

					//跳转到酒店详情页面
					mui.openWindow({
						url: "hotel_info.html",
						id: "hotel_info.html",
						extras: {
							hid: hid,
							beginTime: beginTime,
							endTime: endTime
						}
					});
				});

				//初始化区域滚动的属性
				mui('.mui-scroll-wrapper').scroll({
					scrollY: true, //是否竖向滚动
					scrollX: false, //是否横向滚动
					startX: 0, //初始化时滚动至x
					startY: 0, //初始化时滚动至y
					indicators: false, //是否显示滚动条
					deceleration: 0.1, //阻尼系数,系数越小滑动越灵敏
					bounce: true //是否启用回弹
				});

				//初始化日期选择事件
				document.getElementById("beginTimeBtn").addEventListener('tap', function() {
					var dDate = new Date();
					var minDate = new Date();
					var maxDate = new Date();
					//今天的日期
					var nowday = maxDate.getDate();
					maxDate.setDate(nowday + 11);
					plus.nativeUI.pickDate(function(e) {
						var d = e.date;
						document.getElementById("beginTimeBtn").value = d.getFullYear() + "-" + getFormat((d.getMonth() + 1)) + "-" +
							getFormat(d.getDate());
					}, function(e) {
						mui.toast("您没有选择日期");
					}, {
						title: "请选择日期",
						date: dDate,
						minDate: minDate,
						maxDate: maxDate
					});
				})
				//初始化日期选择事件
				document.getElementById("endTimeBtn").addEventListener('tap', function() {
					var dDate = new Date();
					var minDate = new Date();
					var maxDate = new Date();
					//今天的日期
					var nowday = maxDate.getDate();
					maxDate.setDate(nowday + 11);
					plus.nativeUI.pickDate(function(e) {
						var d = e.date;
						document.getElementById("endTimeBtn").value = d.getFullYear() + "-" + getFormat((d.getMonth() + 1)) + "-" +
							getFormat(d.getDate());
					}, function(e) {
						mui.toast("您没有选择日期");
					}, {
						title: "请选择日期",
						date: dDate,
						minDate: minDate,
						maxDate: maxDate
					});
				})

				//初始化搜索信息
				initSearchInfo();
				//开始进行搜索
				search();

			});

			function getFormat(n) {
				if (n < 10) {
					return "0" + n;
				}
				return n;
			}

			//初始化搜索的信息
			function initSearchInfo() {

				var cpage = plus.webview.currentWebview();
				var keyword = cpage.keyword;
				var beginTime = cpage.beginTime;
				var endTime = cpage.endTime;
				var minPrice = cpage.minPrice;
				var maxPrice = cpage.maxPrice;

				document.getElementById("keyword").value = keyword;
				document.getElementById("beginTimeBtn").value = beginTime;
				document.getElementById("endTimeBtn").value = endTime;
				document.getElementById("minPrice").value = minPrice;
				document.getElementById("maxPrice").value = maxPrice;
			}


			//进行搜索
			function search(sortType) {
				var keyword = document.getElementById("keyword").value;
				var beginTime = document.getElementById("beginTimeBtn").value;
				var endTime = document.getElementById("endTimeBtn").value;
				var minPrice = document.getElementById("minPrice").value;
				var maxPrice = document.getElementById("maxPrice").value;
				var sortType = sortType ? sortType : 1;

				//获取当前城市
				var cityName = getCity();
				//获取当前经纬度
				var location = getLocation();
				var lat = location.lat;
				var lon = location.lon;
				//ajax
				myajax({
					url: url.searchHotel,
					data: {
						keyword: keyword,
						beginTime: beginTime,
						endTime: endTime,
						minPrice: minPrice,
						maxPrice: maxPrice,
						cityName: cityName ? cityName : null,
						lat: lat ? lat : -1,
						lon: lon ? lon : -1,
						sortType: sortType
					},
					success: function(data) {
						/* alert("搜索的结果：" + JSON.stringify(data));
						console.log("数据长度:"+data.length); */
						var html = "";
						if (data.length > 0) {
							//搜索出数据
							for (var i = 0; i < data.length; i++) {
								console.log("id:" + data[i].id);
								html += '<li class="mui-table-view-cell mui-media" hid="' + data[i].id + '">';
								html += '<a href="javascript:;">';
								html += '<img class="mui-media-object mui-pull-left" style="width: 120px; height: 120px; min-width: 120px;"';
								html += 'src="' + url.getImage + '?path=' + data[i].hotelImage + '">';
								html += '<div class="mui-media-body">';
								html += '<span style="font-size: 20px;">' + data[i].hotelName + '</span>';
								html += '<p class="mui-ellipsis">' + data[i].hotelInfo.substring(0, 20) + '...</p>';
								html += '<p class="mui-ellipsis">' + data[i].brand + '</p>';
								html += '<p class="mui-ellipsis">' + data[i].keyword + '</p>';
								html += '<p class="mui-ellipsis">' + data[i].address + '(距离我' + data[i].distance + 'km)</p>';
								html += '</div>';
								html += '</a>';
								html += '<a class="mui-btn" style="color: red; font-size: 30px; border: 0px">￥' + data[i].avgPrice + '</a>';
								html += '</li>';

							}

						} else {
							//
							html = "没有搜索到相关的酒店信息！";
						}

						//设置查询结果
						document.getElementById("hotelList").innerHTML = html;

					}
				});
			}
		</script>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav" style="background-color: white;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: black;"></a>
			<h1 class="mui-title" style="color: black;">搜索结果</h1>
		</header>

		<!-- 搜索框 -->
		<form class="mui-input-group" style="margin: 10px; margin-top: 55px;">
			<div class="mui-input-row">
				<label>搜索框</label>
				<input type="text" id="keyword" class="mui-input-clear" placeholder="请输入酒店名称/关键词/品牌/行政区域/房型等">
			</div>
			<div class="mui-input-row">
				<label>入住时间</label>
				<input id="beginTimeBtn" type="text" class="mui-input-clear" placeholder="请选择入住时间">
			</div>
			<div class="mui-input-row">
				<label>离店时间</label>
				<input id="endTimeBtn" type="text" class="mui-input-clear" placeholder="请选择离店时间">
			</div>
			<div class="mui-input-row">
				<label>最低价位</label>
				<input type="text" id="minPrice" class="mui-input-clear" placeholder="请输入最低价位">
			</div>
			<div class="mui-input-row">
				<label>最高价位</label>
				<input type="text" id="maxPrice" class="mui-input-clear" placeholder="请输入最高价位">
			</div>
			<div class="mui-button-row">
				<button type="button" id="searchBtn" class="mui-btn mui-btn-primary mui-icon mui-icon-search" style="width: 80%;">搜索</button>
			</div>
		</form>

		<div style="padding-left: 20px;">
			<button class="mui-icon iconfont icon-paixu mui-right" id="sortBtn1">智能排序</button>&nbsp;&nbsp;
			<button class="mui-icon iconfont icon-paixu mui-right" id="sortBtn2">价格排序</button>&nbsp;&nbsp;
			<button class="mui-icon iconfont icon-paixu mui-right" id="sortBtn3">离我最近</button>
		</div>

		<!-- 搜索列表 -->
		<div class="mui-scroll-wrapper" style="margin-top: 350px;">
			<div class="mui-scroll">
				<!--这里放置真实显示的DOM内容-->
				<ul id="hotelList" class="mui-table-view">

					<!--<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									
									<img class="mui-media-object mui-pull-left" style="width: 120px; height: 120px; min-width: 120px;" 
										src="images/1.jpg">
										
									<div class="mui-media-body">
										<span style="font-size: 20px;">酒店标题</span>
										<p class="mui-ellipsis">酒店描述...</p>
										<p class="mui-ellipsis">品牌</p>
										<p class="mui-ellipsis">关键词</p>
										<p class="mui-ellipsis">地址(距离我km)</p>
									</div>
								</a>
								<a class="mui-btn" style="color: red; font-size: 30px; border: 0px">￥xxx.xx</a>
							</li>-->

				</ul>
			</div>
		</div>
	</body>

</html>
